{% extends "award_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "我的审核" %}</title>
    {{ block.super }}
    <style>
        .p_class {
            text-align: left;
            vertical-align: middle;
            float: left;
            font-size: 14px;
            font-weight: normal;
            color: #666;
            line-height: 1;
            box-sizing: border-box;
            padding: 10px 28px 10px 0;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="page-content" style="min-width:80%;">
        <ol class="breadcrumb detail-breadcrumb">
            <li class="all pro-all"><span href="#index?catalogue=all&amp;tag=all">系统管理</span></li>
            <li><span href="#index/list?catalogue=导航&amp;tag=all">我的审核</span></li>
        </ol>
        <div class="bk-panel bk-demo">
            <div class="bk-panel-body p0">
                <table id="application" class="bk-table table-bordered">
                    <thead>
                    <tr>
                        <th>所属组织</th>
                        <th>申报奖项</th>
                        <th>奖项状态</th>
                        <th>申报人/团队</th>
                        <th>申报状态</th>
                        <th>申报时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="displayApplyAndAwardsModal" tabindex="1" role="dialog"
         aria-labelledby="displayApplyAndAwardsModalLabel"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="displayApplyAndAwardsModalLabel">奖项查看</h4>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="bk-form" style="padding: 10px">
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">奖项名称：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p id="display_edit_display_award_name" class="p_class"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">评奖条件：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_requirement"
                                       style="word-break: break-word"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">奖项级别：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_award_level"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">所属组织：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_belonging_org"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">开始时间：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_start_datetime"
                                       name="display_start_datetime"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">结束时间：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_end_datetime"
                                       name="edit_display_end_datetime"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">是否需要附件：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_need_attachment"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">奖项状态：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_status"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <form id="validate_form">
                            <input type="hidden" id="award_id" class="bk-form-input">
                            <input type="hidden" id="apply_id" class="bk-form-input">
                            <div class="bk-form" style="padding: 10px 28px 10px 0" id="validate_form">
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">申报人/团队</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="display_edit_applicant_info"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">事迹介绍</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="display_edit_introduction"
                                           style="word-break: break-word"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">附件</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <a href="" target="_blank" id="display_edit_attachment_url"><span
                                                class="bk-tag is-fill bk-primary">点击查看附件</span></a>
                                    </div>
                                </div>
                                <div class="bk-form-item is-required">
                                    <label class="bk-label" style="width:150px;">评奖</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <label class="bk-form-radio">
                                            <input type="radio" name="radio1" checked="checked" value=5>
                                            <i class="bk-radio-text">获奖</i>
                                        </label>
                                        <label class="bk-form-radio">
                                            <input type="radio" name="radio1" value=4>
                                            <i class="bk-radio-text">未获奖</i>
                                        </label>
                                    </div>
                                </div>
                                <div class="bk-form-item is-required">
                                    <label class="bk-label" style="width:150px;">评语</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <textarea class="bk-form-textarea" id="comment"
                                                  name="comment"
                                                  placeholder="请输入评语"></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="modal-footer">
                    <a class="bk-button bk-primary" id="submit" title="保存" onclick="save()">
                        <span>保存</span>
                    </a>
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
{% endblock %}

{% block extra_block %}
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkSwitcher-1.0/js/bkSwitcher.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDialog-2.0/js/bkDialog.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkMessage-1.0/js/bkMessage.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
    <script>
        //表格(DataTables)
        var language = {
            search: "{% trans '搜索：' %}",
            lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
            zeroRecords: "{% trans '没找到相应的数据！' %}",
            info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
            infoEmpty: "{% trans '暂无数据！' %}",
            infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
            paginate: {
                first: "{% trans '首页' %}",
                last: "{% trans '尾页' %}",
                previous: "{% trans '上一页' %}",
                next: "{% trans '下一页' %}",
            }
        }
        var applicationTable = $('#application').DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分页
            ordering: false, //关闭排序
            info: true, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 10, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            language: language, //汉化
            serverSide: true,
            lengthMenu: [5, 10, 25, 50, 75, 100],
            ajax: {
                url: '{{SITE_URL}}get_review_list/',
                method: "get",
                dataType: 'json',
                dataSrc: function (json) {
                    json.draw = json.data.info.draw;
                    json.recordsTotal = json.data.info.recordsTotal;
                    json.recordsFiltered = json.data.info.recordsFiltered;
                    json.data = json.data.info.data
                    return json.data;
                },
            },
            columnDefs: [
                {
                    targets: 0,
                    data: "org_name", className: "text-center",
                },
                {
                    targets: 1,
                    data: "award_name", className: "text-center",
                },
                {
                    targets: 2,
                    data: "award_status", className: "text-center",
                    render: function (data, type, row, meta) {
                        if (data === "生效中") {
                            return '<span class="bk-tag is-fill bk-warning">' + data + '</span>';
                        } else {
                            return '<span class="bk-tag is-fill bk-error">' + data + '</span>';
                        }
                    }
                },
                {
                    targets: 3,
                    data: "applicant_info", className: "text-center",
                },
                {
                    targets: 4,
                    data: "state", className: "text-center",
                    render: function (data, type, row, meta) {
                        if (data === "审核中") {
                            return '<span class="bk-tag is-fill bk-gray">' + data + '</span>';
                        } else if (data === "已通过") {
                            return '<span class="bk-tag is-fill bk-primary">' + data + '</span>';
                        } else if (data === "未通过") {
                            return '<span class="bk-tag is-fill bk-error">' + data + '</span>';
                        } else if (data === "未获奖") {
                            return '<span class="bk-tag is-fill bk-light-gray">' + data + '</span>';
                        } else {
                            return '<span class="bk-tag is-fill bk-success">' + data + '</span>';
                        }
                    }

                },
                {
                    targets: 5,
                    data: "apply_time", className: "text-center",
                },
                {
                    targets: 6,
                    data: "id",
                    render: function (data, type, row, meta) {
                        if (row.state === "未申报") {
                            return '--';
                        } else if (row.state === "审核中") {
                            return '<a class="bk-icon-button bk-primary bk-button-mini" type="button" onclick="reviewApplyAward(1, ' + data + ')" title="通过">\n' +
                                '<i class="bk-icon icon-check-1 bk-icon"></i>\n' +
                                '<i class="bk-text">通过</i>\n' +
                                '</a>' +
                                '<a class="bk-icon-button bk-danger bk-button-mini" type="button" onclick="reviewApplyAward(0, ' + data + ')" title="驳回">\n' +
                                '<i class="bk-icon icon-close bk-icon"></i>\n' +
                                '<i class="bk-text">驳回</i>\n' +
                                '</a>';
                        } else if (row.state === "未通过") {
                            return '--'
                        } else if (row.state === "已通过") {
                            return '<a class="bk-icon-button bk-success bk-button-mini" type="button" onclick="displayApplyAndAwardsModal(' + row.award_id + ',' + data + ')" data-toggle="modal" data-target="#displayApplyAndAwardsModal" title="评奖">\n' +
                                '<i class="bk-icon icon-cog bk-icon"></i>\n' +
                                '<i class="bk-text">评奖</i>\n' +
                                '</a>';
                        } else if (row.state === "已获奖") {
                            return '--';
                        } else {
                            return '--';
                        }
                    }
                },
            ]
        });

        function reviewApplyAward(action, id) {
            var dialog = new bkDialog({
                type: 'dialog',
                title: '审核奖项',
                content: action === 1 ? '确认通过该奖项申报？' : '确认驳回该奖项申报？',
                confirmFn: function () {
                    $.ajax({
                        url: '{{ SITE_URL }}review_apply_award/',
                        method: 'post',
                        data: {
                            "id": id,
                            "action": action
                        },
                        success: function (response) {
                            if (response['result']) {
                                new bkMessage({
                                    message: response['message'],
                                    theme: 'success'
                                })
                                applicationTable.ajax.reload(null, false)
                            } else {
                                // 失败处理
                                new bkMessage({
                                    message: response['message'],
                                    theme: 'error',
                                    delay: 3000
                                });
                            }
                        }
                    })
                }
            });
            dialog.show();
        }

        function displayApplyAndAwardsModal(award_id, apply_id) {
            $.ajax({
                url: '{{ SITE_URL }}get_display_award_apply_info/' + award_id + '/' + apply_id,
                method: 'get',
                success: function (response) {
                    if (response['result']) {
                        $("#display_edit_display_award_name").html(response.data.info.data.award_name);
                        $("#display_edit_display_requirement").html(response.data.info.data.requirement);
                        $("#display_edit_display_award_level").html(response.data.info.data.award_level);
                        $("#display_edit_display_belonging_org").html(response.data.info.data.belonging_org);
                        $("#display_edit_display_start_datetime").html(response.data.info.data.start_time);
                        $("#display_edit_display_end_datetime").html(response.data.info.data.end_time);
                        $("#display_edit_display_need_attachment").html(response.data.info.data.need_attachment);
                        $("#display_edit_display_status").html(response.data.info.data.status);
                        $("#award_id").val(response.data.info.data.award_id);
                        $("#apply_id").val(response.data.info.data.apply_id);
                        $("#display_edit_applicant_info").html(response.data.info.data.applicant_info);
                        $("#display_edit_introduction").html(response.data.info.data.introduction);
                        $("#display_edit_attachment_url").attr('href', "{{ SITE_URL }}" + response.data.info.data.attachment_url);
                        $("#display_comment").html(response.data.info.data.comment);
                        $("#display_state").html(response.data.info.data.state);
                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                    }
                }
            })
        }

        $('#validate_form').validate({
            ignore: '.ignore',
            errorElement: 'div', //错误信息的容器
            errorClass: 'is-danger',
            errorPlacement: function (error, element) {
                error.addClass('bk-form-tip').insertAfter(element)
            },
            success: function (label) {                 //验证通过的提示图标
                label.html('<div class="bk-badge bk-success"><i class="bk-icon icon-check-1"></i></div>');
            },
            validClass: "bk-valid",
            //验证规则
            rules: {
                comment: {
                    required: true,
                }
            },
            //错误提示信息
            messages: {
                comment: "<p class='bk-tip-text'>评语为必填项！</p>  ",
            }
        });

        function save() {
            if ($('#validate_form').valid()) {
                var award_id = $('#award_id').val()
                var apply_id = $('#apply_id').val()
                $.ajax({
                    url: '{{ SITE_URL }}save_awards_apply_info/',
                    method: 'post',
                    data: {
                        'award_id': award_id,
                        'apply_id': apply_id,
                        'state': $("input[name='radio1']:checked").val(),
                        'comment': $('#comment').val(),
                        'csrfmiddlewaretoken': "{{ csrf_token }}"
                    },
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            $('#displayApplyAndAwardsModal').modal('hide')
                            applicationTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                        }
                    }
                })
            }
        }

        $('#displayApplyAndAwardsModal').on('hide.bs.modal', function () {
            document.getElementById("validate_form").reset();
            $("#validate_form").validate().resetForm();
            $('#comment').val("");
        });
    </script>
{% endblock %}